<template>
  <div class="auditFound">
    <lookUpText title="基础信息"></lookUpText>
    <div class="auditFound-formRef">
      <a-form ref="formRef" :style="{ width: '420px' }" @submit="handleSubmit">
        <a-form-item field="size" label="模板名称">
          <a-input />
        </a-form-item>
        <a-form-item field="size" label="审批级数">
          <a-select :style="{ width: '100%' }" placeholder="请选择级数" @change="seriesChange">
            <a-option v-for="(value, index) in seriesList" :key="index" :value="value">{{ value }}级</a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </div>
    <template v-if="detailsList.length > 0">
      <lookUpText title="审批流程"></lookUpText>
      <div class="auditFound-formRef" :style="{ width: '300px' }">
        <a-timeline :style="{ marginRight: '40px' }">
          <a-timeline-item v-for="(value, index) in detailsList" :key="index" :label="'审核人员' + value.level" dot-color="#00B42A">
            <a-select v-model="value.value" placeholder="请选择级数">
              <a-option :value="value.value" @click="detailsName(value.name, index)">{{ value.name }}</a-option>
            </a-select>
          </a-timeline-item>
        </a-timeline>
      </div>
    </template>
    <a-popconfirm content="是否生成申请模板?生成后则不能在修改,请确认模板" @ok="templateGeneration">
      <a-button type="primary">确认生成申请模板</a-button>
    </a-popconfirm>
  </div>
</template>

<script lang="ts">
import lookUpText from '@com/lookUpText/lookUpText.vue';
import importConfig from './auditFound';
import { toRefs } from 'vue';
export default {
  components: {
    lookUpText,
  },
  setup() {
    const { init, base, seriesChange, templateGeneration, detailsName } = importConfig();
    init();
    return {
      init,
      ...toRefs(base),
      seriesChange,
      templateGeneration,
      detailsName,
    };
  },
};
</script>

<style lang="less" scoped>
.auditFound {
  background: white;
  padding: 15px;
  &-formRef {
    margin-top: 20px;
  }
}
</style>
